<template>
	<tr>


		<!--<td><input type="checkbox" :checked='item.resolved'@click="resolvedClickCallback(item.id)"></td>-->
		<td style="min-width: 50px;width: 10%;text-align: center"><input type="checkbox" :checked='item.resolved'@click="resolvedClickCallback(item.id)"></td>
		<td >
			<span class="desc" v-show="!item.editState" @click="changeEditState(item)">{{item.desc}}</span>
			<input ref="inputDesc" type="text" v-show="item.editState"style="width: 150px;" :value="item.desc" @blur="updateDesc(item,$event)">
		</td>
		<td style="min-width: 50px;width: 10%;text-align: center"><button class="small red button" @click="delCallback(item.id)">删除</button></td>
	</tr>
</template>

<script>
	export default{
		name:'BugItem',
        props:['item','resolvedClickCallback','delCallback','updateDesc'],
		methods:{
            changeEditState(item){
                if(!item.hasOwnProperty('editState')){
                    this.$set(item,'editState',true)
                }else{
                    item.editState = true;
                }
                //在dom全部渲染完毕后被调用
                this.$nextTick(function () {
					this.$refs.inputDesc.focus();
                })

            },

	}
	}
</script>

<style scoped>


	.desc{
		cursor: pointer;
	}
</style>